<template>
  <el-dialog :title="uiObj.title" v-model="uiObj.visiable" width="500px" append-to-body>
    <el-form :model="folderForm" :rules="folderRules" ref="folderFormRef" label-width="100px">
      <el-form-item label="文件夹名称" prop="title">
        <el-input v-model="folderForm.title" placeholder="请输入文件夹名称" maxlength="30"/>
      </el-form-item>
      <el-form-item label="可见范围">
        <el-radio-group v-model="folderForm.permission.value">
          <el-radio label="invisible">不可见</el-radio>
          <el-radio label="part">部分可见</el-radio>
          <el-radio label="public">公开</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="folderForm.permission.value === 'part'">
        <el-button icon="More">选择</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" :loading="uiObj.loading" @click="submitFolderForm">确 定</el-button>
        <el-button :loading="uiObj.loading" @click="uiObj.open = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="FolderDialog">
import {
  addFolder,
  updateFolder
} from '@/api/knowledge/assets.js'
import {ref} from "vue";
let proxy = getCurrentInstance();
const emits = defineEmits(['closeDialog'])
const props = defineProps({
  visiable: {
    type: Boolean,
    default: false
  },
  folderId: {
    type: String
  },
  storageId: {
    type: String
  },
  obj:{
    type: Object
  }
})
const folderForm = reactive({
  title: null,
  permission: {
    value: 'invisible'
  }
})
const uiObj = reactive({
  visible: false,
  loading: false,
  title: "新增文件夹"
})
const folderRules = ref([]);
watch( () => props.visiable, () => {
  resetForm()
  uiObj.visiable = true;
})
watch( () => props.obj, () => {
  resetForm()
  if (props.obj && props.obj.id) {
    folderForm.value = props.obj
    uiObj.title = "编辑文件夹"
  } else {
    uiObj.title = "新增文件夹"
  }
})

function resetForm(){
  folderForm.value = {
    title: null,
    permission: {
      value: 'invisible'
    }
  }
}

function closeDialog(status) {
  uiObj.visiable = false
  emits('closeDialog', status);
}

function submitFolderForm() {
  uiObj.loading = true
  folderForm.parentId = props.folderId
  folderForm.storageId = props.storageId
  folderForm.permission = JSON.stringify(folderForm.permission)
  if (folderForm.id) {
    updateFolder(folderForm).then(res => {
      uiObj.loading = false
      if (res.code === 200) {
        closeDialog('success')
        proxy.$modal.msgSuccess("修改成功");
      } else {
        proxy.$modal.msgError("修改失败")
      }
    })
  } else {
    addFolder(folderForm).then(res => {
      uiObj.loading = false
      if (res.code === 200) {
        closeDialog('success')
        proxy.$modal.msgSuccess("新增成功");
      } else {
        proxy.$modal.msgError("新增失败")
      }
    })
  }
}
</script>
